<template>
  <div class="page">
    <div class="row row-logo">
      <div
        class="logo"
      >
        <SvgIcon
          class="logo-icon"
          data="@icon/logo.svg"
        />
        <h1 class="logo-title">
          音域
        </h1>
      </div>
    </div>
    <div class="row row-search">
      <i-input
        v-model="inputKey"
        search
        enter-button
        size="large"
        placeholder="歌手/专辑/歌名"
        @on-search="handleSearch"
      >
        <Select
          slot="prepend"
          v-model="inputType"
          style="width: 80px"
        >
          <Option value="artist">
            歌手
          </Option>
          <Option value="album">
            专辑
          </Option>
          <Option value="song">
            歌曲
          </Option>
        </Select>
      </i-input>
    </div>
    <div class="row row-list">
      <TreadNews v-show="activedList === 'trend'" />
      <SearchResult
        v-show="activedList === 'search'"
        v-model="activeSearch"
        :search="searchKey"
        :type="searchType"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import SearchResult from './search/SearchResult.vue'
import TreadNews from './trend/News.vue'

@Component({
  name: 'Index',
  components: {
    SearchResult,
    TreadNews
  }
})
export default class extends Vue {
  private inputKey = ''
  private inputType: 'artist' | 'album' | 'song' = 'song'
  private searchKey = ''
  private searchType: 'artist' | 'album' | 'song' = 'song'
  private activeSearch = false // 为 true 时 SearchResult 立即执行搜索请求，执行完毕后自动置回 false
  private activedList: 'search' | 'trend' = 'trend'

  private handleSearch () {
    this.searchKey = this.inputKey
    this.searchType = this.inputType
    this.activeSearch = true
    this.activedList = 'search'
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/theme";

@logo-size: 48px;
@logo-title-size: 36px;

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.row {
  margin: 0 auto;
}

.row-search {
  min-width: 300px;
  width: 80%;
}

.row-list {
  min-width: 600px;
  margin: 5vh auto;
}

.logo {
  display: flex;
  align-content: center;
  margin: 10vh auto;
  &:hover {
    .logo-icon {
      color: lighten(@primary-color, 10%);
    }
    .logo-title {
      color: lighten(@primary-color, 10%);
    }
  }
  .logo-icon,
  .logo-title {
    display: inline-block;
  }
  .logo-icon {
    margin: auto 6px auto 0;
    width: @logo-size;
    height: @logo-size;
    color: @primary-color;
  }
  .logo-title {
    font-size: @logo-title-size;
    color: @text-color;
    transition: all 0.2s ease-in-out;
  }
}

.ivu-input, .ivu-select, .ivu-select-item:not(.ivu-select-item-selected) {
  color: @input-color;
}
</style>
